<template>
    <div id="container">
        <p>登录</p>
      <img class="container-img" src="~@/assets/login/dipinlogo_login.png" alt="">
      <van-tabs class="tab-select">
           <van-tab title="账号登录">
            <van-form >
                <van-field name="用户名" label="用户名" placeholder="请输入用户名"   :rules="[{ required: true, message: '请填写用户名'}]"/>
                <van-field type="password" name="密码" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码'}]"/>
                <router-link to="/reisger">新用户注册</router-link>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
             </van-form>  
           </van-tab>
           <van-tab title="验证码登录">
             <van-form >
                <van-field name="用户名" label="用户名" placeholder="请输入用户名"   :rules="[{ required: true, message: '请填写用户名'}]"/>
                <van-field type="password" name="密码" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码'}]"/>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
             </van-form>
           </van-tab>
      </van-tabs> 
      <router-view></router-view> 
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>
#container{
    background-color:chartreuse;
     display: flex;
     width: 100vw;
     height: 100vh;
     flex-direction: column;
     align-content: center;
     align-items: center;
     .container-img{
         width: 20vw;
         height: 20vw;
     }
}
</style>